<template>
  <div class="h-full">
    <ul class="grid grid-cols-6 gap-2 p-2" v-if="libraryTable.data.length > 0">
      <li
        v-for="(item, key) in libraryTable.data"
        :key="key"
        class="card-item"
        @click="selectItem(item)"
      >
        <a-card
          :class="[{ active: find(item) > -1 }, { disabled: item.status === '1' }]"
          :body-style="{ padding: '8px', height: 'fit-content' }"
        >
          <template #cover>
            <Resource :file="item" />
          </template>
          <a-card-meta>
            <template #title>
              <div class="flex items-center">
                <span class="mr-3"> {{ item.name }} </span>
              </div>
            </template>
            <template #description>
              <a-badge :color="reviewStatusList[item.status].color" dot>
                <span>{{ t[reviewStatusList[item.status].title] }} </span>
              </a-badge>
            </template>
          </a-card-meta>
          <div class="absolute right-4 top-4" v-if="find(item) > -1">
            <a-badge :count="find(item) + 1"></a-badge>
          </div>
        </a-card>
      </li>
    </ul>
    <a-empty v-else />
  </div>
</template>

<script setup lang="ts">
import { Library } from "@/api/service/library/types";

import { reviewStatusList } from "@/views/admin/service/review/data/options";
import { Message } from "@arco-design/web-vue";
import { listLibrary, listLibrarySize } from "../data/curd";
import { libraryQuery, libraryTable } from "../data/table";

const selectedLibrary = defineModel<Library[]>("selected");

const t = translate("公共模块");
const props = defineProps<{
  limit?: number;
  /* 图片|视频 */
  type?: "0" | "1" | string;
  sizeId?: string;
  multiple?: boolean;
}>();
const selectItem = (item: Library) => {
  if (item.status !== "0" || !selectedLibrary.value) {
    Message.warning(t.value?.["正在审核"]);
    return;
  }
  /* 处理多选 */
  if (props.multiple) {
    const index = selectedLibrary.value?.findIndex((v) => {
      return v.resId === item.resId;
    });
    if (index !== -1) {
      selectedLibrary.value!.splice(index, 1);
      return;
    }
    selectedLibrary.value!.push(item);
  }
  /* 旧逻辑 */
  if (props.limit && (props.limit || 0) < selectedLibrary.value.length) {
    selectedLibrary.value!.shift();
  }
};

const find = (item: Library) => {
  return (selectedLibrary.value || []).findIndex((v) => {
    if (v.resId === item.resId) {
      return true;
    }
  });
};
onMounted(async () => {
  libraryQuery.value.type = props.type;
  libraryQuery.value.sizeId = props.sizeId;
  await listLibrary();
  await listLibrarySize();
});
</script>

<style lang="scss" scoped>
.grid {
  background-color: var(--color-neutral-1);
}

::v-deep(.arco-card-meta-footer) {
  margin-top: 8px;
}

.media {
  height: 120px;
  overflow: hidden;
  border-bottom: 1px solid #ddd;

  &:hover {
    background: #f8f8f8;
  }

  img,
  video {
    height: 100%;
    object-fit: contain;
    width: 100%;
  }
}

.active {
  border: 1px solid var(--primary);
}
</style>
